<template>
  <div class="mform">
    <div class="back">
      <Back>
        <div class="form-btn">
          <el-button type="primary" @click="save()">保存</el-button>
        </div>
      </Back>
    </div>
    <div class="form-content">
      <div class="form-box" style="width: 60%;">
        <el-form ref="formRef" :model="form" :rules="rules" :label-position="'left'" label-width="auto">
          <el-form-item label="所属菜单" prop="parent">
            <el-tree-select v-model="form.parent" :data="tree" :props="{ label: 'name', children: 'children' }"
              :default-expanded-keys="[0]" :check-strictly="true" :render-after-expand="false" node-key="id"
              placeholder="请选择所属菜单" />
          </el-form-item>
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入菜单名称" clearable />
          </el-form-item>
          <el-form-item label="菜单标识" prop="key">
            <el-input v-model="form.key" placeholder="请输入菜单标识" clearable />
          </el-form-item>
          <el-form-item label="菜单图标" prop="icon">
            <Icons v-model="form.icon" />
          </el-form-item>
          <el-form-item label="菜单路径">
            <el-input v-model="form.route" placeholder="请输入菜单路径" :disabled="form.type == 2" clearable />
          </el-form-item>
          <el-form-item label="文件路径">
            <el-input v-model="form.component" placeholder="请输入文件路径" :disabled="form.type == 2" clearable>
              <template #prepend>
                <span>src/pages/</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="菜单类型">
            <el-radio-group v-model="form.type">
              <el-radio label="1">常规菜单</el-radio>
              <el-radio label="2">树状菜单</el-radio>
              <el-radio label="3">扩展菜单</el-radio>
              <el-radio label="4">外部链接</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="菜单模式">
            <el-radio-group v-model="form.mode" :disabled="form.type == 2">
              <el-radio label="1">菜单模式</el-radio>
              <el-radio label="2">页面模式</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="菜单排序" prop="sort">
            <el-input v-model="form.sort" placeholder="请输入菜单排序" clearable />
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input v-model="form.desc" placeholder="请输入备注信息" clearable />
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>
<script setup name="MenuDetail">
const { proxy } = getCurrentInstance()

const formRef = ref();
const tree = ref([]);
const form = reactive({ id: '', parent: null, name: '', key: '', icon: '', route: '', component: '', type: '1', mode: '1', sort: '0', desc: '' });
//验证规则
const rules = {
  parent: [{ required: true, message: '请选择所属菜单', trigger: 'change' }],
  name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  key: [{ required: true, message: '请输入菜单标识', trigger: 'blur' }],
  icon: [{ required: true, message: '请选择菜单图标', trigger: 'change' }],
  sort: [{ required: true, message: '请输入菜单排序', trigger: 'blur' }]
};
//保存
async function save() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let res = await proxy.$post('adminMenuSave', form)
      if (res.code === 0) {
        ElMessage({ type: 'success', message: '保存成功' });
        proxy.$bus.emit('back');
      }
    }
  });
}

onMounted(() => {
  getTree()
  // 编辑
  let id = proxy.$route.query.id || null;
  if (id) {
    getDetail(id)
  }
});

async function getTree() {
  let res = await proxy.$get('adminMenuList', {
    page: 1,
    page_size: 1000,
  }, false)
  if (res.code === 0) {
    tree.value = [{ id: '0', parent: -1, name: '根菜单', type: '2', children: res.data.list || [] }];
  }
}

async function getDetail(id) {
  let res = await proxy.$post('adminMenuDetail', {
    id
  }, false)
  if (res.code === 0) {
    Object.assign(form, res.data);
  }
}
</script>
<style scoped lang="scss"></style>
